<template>
    <div class="page-top">
        <div style="position: relative">
            <slot />
            <a-steps :current="newStage" progress-dot size="small" style="margin-top: 24px">
                <a-step v-for="val in stageInfo" :title="val.dimensionName" :key="+val.code" />
            </a-steps>
        </div>
    </div>
</template>

<script lang="ts">
import { deepClone } from '@/utils/util';
import { isNotEmpty } from '@/utils/is';
import { defineComponent, reactive, toRefs, watch } from 'vue';
import store from '@/store';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const state = reactive<any>({
            newStage: 0,
            stageInfo: {}
        });
        const getStageInfo = () => {
            const dicOptions: any = deepClone(store.getters.dicOptions);
            const { processType, systemType } = props.detail;
            // 外采
            if (systemType === '1' || processType === '1') {
                const index = dicOptions.processStatus.findIndex((item) => item.code === '5');
                if (index >= 0) {
                    dicOptions.processStatus.splice(1, index - 1);
                }
            }
            // 自研
            if (systemType === '2' || processType === '2') {
                const index = dicOptions.processStatus.findIndex((item) => item.code === '5');
                if (index >= 0) {
                    dicOptions.processStatus.splice(index, 1);
                }
            }
            state.stageInfo = [{ dimensionName: '发起评审', code: '0' }, ...dicOptions.processStatus];
        };
        const init = () => {
            getStageInfo();
            if (!props.detail.processStatus) {
                state.newStage = 0;
            } else {
                state.newStage = state.stageInfo.findIndex((item) => item.code === props.detail.processStatus);
            }
        };
        init();
        // 监听流程状态，来更新步骤条的阶段
        watch(
            () => props.detail.processStatus,
            (n) => {
                if (isNotEmpty(state.stageInfo)) {
                    if (!n) {
                        state.newStage = 0;
                    } else {
                        state.newStage = state.stageInfo.findIndex((item) => item.code === n);
                    }
                }
            }
        );
        // 监听流程类型，来显示不同的流程状态步骤条
        watch(() => props.detail.processType, getStageInfo);
        return { ...toRefs(state), getStageInfo };
    }
});
</script>
<style scoped lang="less">
.page-top {
    min-height: 144px;
    padding-bottom: 16px;
    box-sizing: border-box;
    background: #fff;
    // 防止进度条超出
    .ant-steps-item {
        width: 20px;
        flex: 0 0 9% !important;
    }
}
</style>